<template>
  <view class="job-detail-page">
    <!-- 优化后的顶部区域 -->
    <view class="top-section" :style="topBg ? 'background-image:url(' + topBg + ');background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#13c2a3;' : ''">
      <view class="safe-area"></view>
      <view class="top-mask"></view>
      <view class="header">
        <image src="/static/back.png" class="back-icon" @click="goBack" />
      </view>
      <view class="job-info-row">
        <view class="icon-wrap">
          <image class="company-icon" :src="job.companyIcon" mode="aspectFill"></image>
        </view>
        <view class="job-info-text">
          <view class="job-title">{{ job.jobTitle }}</view>
          <view class="company-name">{{ job.companyName }}</view>
        </view>
      </view>
      <view class="tags-row">
        <text class="tag" v-for="(tag, i) in job.tags" :key="i">{{ tag }}</text>
      </view>
      <view class="salary-location-row">
        <text class="salary">{{ job.salary || '18-42k*16' }}</text>
        <text class="location">{{ job.province || '北京' }} {{ job.city || '朝阳区' }}</text>
      </view>
    </view>

    <!-- 优化后的白色卡片区 -->
    <view class="main-content">
      <scroll-view scroll-y class="card-section" :scroll-into-view="scrollIntoView" @scroll="onContentScroll" :style="{ height: scrollHeight + 'px' }">
        <view id="descCard" ref="descRef" class="content-card">
          <view class="section-content">
            <view class="section-title">
              岗位描述
            </view>
            <view class="section-detail">
              {{ job.jobDescription }}
            </view>
          </view>
        </view>
        <view id="reqCard" ref="reqRef" class="content-card">
          <view class="section-content">
            <view class="section-title">
              任职要求
            </view>
            <view class="section-detail">
              {{ job.jobRequirement }}
            </view>
          </view>
        </view>
        <view id="compCard" ref="compRef" class="content-card">
          <view class="section-content">
            <view class="section-title">
              公司详情
            </view>
            <view class="section-detail">
              {{ job.companyDetail }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 加载覆盖层 -->
    <view v-if="isLoading" class="loading-mask">
      <view class="spinner"></view>
    </view>
    <!-- 优化后的底部操作栏 -->
    <view class="action-bar">
      <button class="edit-btn" @click="editJob">
        <image src="/static/edit.png" />
        <text>编辑</text>
      </button>
      <button class="delete-btn" @click="deleteJob">
        <image src="/static/delete.png" />
        <text>删除</text>
      </button>
    </view>
  </view>
</template>

<style scoped>
.job-detail-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  padding-bottom: 130rpx; /* 调整为新的底部栏高度 */
  overflow-y: hidden;
  height: 100vh;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  padding: 40px 30rpx 20rpx 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #10b981;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
  margin-left: 0;
  filter: brightness(0);
}

.top-section {
  background: url('/static/BG.png') center center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 400rpx;
  padding-top: 140rpx;
  padding-bottom: 80rpx;
  position: relative;
  height: auto;
  max-height: none;
  box-sizing: border-box;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: visible;
  margin-top: 0;
  z-index: 1;
}

.top-section::after {
  content: '';
  position: absolute;
  bottom: -20rpx;
  left: 0;
  right: 0;
  height: 100rpx;
  background: radial-gradient(ellipse 150% 100% at center bottom, 
    rgba(19, 194, 163, 0.3) 0%,
    rgba(19, 194, 163, 0.2) 30%,
    rgba(19, 194, 163, 0.1) 60%,
    transparent 80%);
  pointer-events: none;
  z-index: 5;
}

.top-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0.0) 100%);
  z-index: 0;
}

.back-btn {
  position: relative;
  left: 30rpx;
  width: 48rpx;
  height: 48rpx;
  z-index: 1;
  margin-top: 100rpx;
}

.back-arrow {
  font-size: 36rpx;
  color: #13c2a3;
  font-weight: bold;
}

.back-arrow-img {
  width: 36rpx;
  height: 36rpx;
  display: block;
}

.icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  background: rgba(255,255,255,0.22);

  border: 1rpx solid rgba(255,255,255,0.3);
  padding: 6rpx;
  z-index: 1;
}

.company-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2rpx solid rgba(255,255,255,0.6);
  background: none;
}

.job-info-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 60rpx;
  margin-bottom: 10rpx;
  padding: 0 30rpx;
  width: 90vw;
  z-index: 1;
}

.job-info-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.job-title {
  color: #fff;
  font-size: 36rpx;
  font-weight: 800;
  margin-bottom: 6rpx;
  text-align: left;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-name {
  color: #fff;
  font-size: 26rpx;
  margin-bottom: 0;
  text-align: left;
  opacity: 0.95;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tags-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 8rpx 0;
  flex-wrap: wrap;
  gap: 8rpx;
  padding: 0 30rpx;
  width: 90vw;
  z-index: 1;
}

.tag {
  background: rgba(255,255,255,0.22);
  color: #ffffff;
  font-size: 22rpx;
  border-radius: 999rpx;
  padding: 4rpx 12rpx;
  margin-right: 0;
  margin-bottom: 0;
  border: 1rpx solid rgba(255,255,255,0.35);
}

.salary-location-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 90vw;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
  padding: 0 30rpx;
  z-index: 1;
  border-radius: 10rpx;
  padding: 12rpx 24rpx;
}

.salary {
  color: #fff;
  font-size: 34rpx;
  font-weight: 800;
  letter-spacing: 1rpx;
}

.location {
  color: #fff;
  font-size: 26rpx;
  text-align: right;
  min-width: 100rpx;
  opacity: 0.95;
}

.main-content {
  margin-top: -100rpx;
  border-radius: 80rpx 80rpx 0 0;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.95) 30%,
    #fff 60%);
  box-shadow: 
    0 -40rpx 80rpx rgba(19, 194, 163, 0.25),
    0 -20rpx 40rpx rgba(19, 194, 163, 0.2),
    0 -10rpx 20rpx rgba(19, 194, 163, 0.15),
    0 -5rpx 10rpx rgba(0, 0, 0, 0.08);
  padding: 0 20rpx;
  position: relative;
  z-index: 10;
  backdrop-filter: blur(20rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.8);
  overflow-y: visible;
  height: auto;
}

.main-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: radial-gradient(ellipse 200% 100% at center top, 
    rgba(19, 194, 163, 0.12) 0%, 
    rgba(19, 194, 163, 0.06) 40%, 
    transparent 70%);
  border-radius: 80rpx 80rpx 0 0;
  pointer-events: none;
}

.main-content::after {
  content: '';
  position: absolute;
  top: 24rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 100rpx;
  height: 8rpx;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(19, 194, 163, 0.3) 20%,
    rgba(19, 194, 163, 0.6) 50%,
    rgba(19, 194, 163, 0.3) 80%,
    transparent 100%);
  border-radius: 4rpx;
  opacity: 0.8;
}

.card-section {
  max-height: none;
  overflow-y: visible;
  padding: 20rpx 0 32rpx 0;
  height: auto;  /* Will be overridden by dynamic style */
  /* Add padding-bottom for bottom action-bar space */
  padding-bottom: 200rpx;  /* Increased buffer for full display on taller screens */
}

.tabs.sticky-tabs {
  display: none;
}

.tabs.sticky-tabs::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40rpx;
  background: radial-gradient(ellipse 80% 100% at center top, 
    rgba(19, 194, 163, 0.08) 0%, 
    transparent 70%);
}

.tabs.sticky-tabs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1rpx;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(19, 194, 163, 0.3) 50%, 
    transparent 100%);
}

.tabs text {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #888;
  padding: 0 8rpx;
  line-height: 80rpx;
  position: relative;
  cursor: pointer;
  font-weight: 500;
  background: transparent;
  transition: color 0.15s ease;
}

.tabs text.active {
  font-size: 32rpx;
  color: #222;
  font-weight: 800;
}

.tabs text.active::after {
  content: '';
  display: block;
  width: 80rpx;
  height: 8rpx;
  background: linear-gradient(90deg, #13c2a3 0%, #0fa085 100%);
  border-radius: 4rpx;
  position: absolute;
  left: 50%;
  bottom: 8rpx;
  transform: translateX(-50%);
  animation: tabIndicator 0.3s ease;
}

@keyframes tabIndicator {
  0% { 
    width: 0; 
    opacity: 0; 
  }
  100% { 
    width: 80rpx; 
    opacity: 1; 
  }
}

.content-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  border-radius: 28rpx;
  margin-bottom: 32rpx;
  padding: 32rpx 28rpx;
  border: 1rpx solid rgba(19, 194, 163, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.content-card:hover {
  transform: translateY(-4rpx);
  box-shadow: 
    0 16rpx 32rpx rgba(19, 194, 163, 0.12),
    0 8rpx 16rpx rgba(0,0,0,0.06);
  border-color: rgba(19, 194, 163, 0.2);
}

.section-content {
  font-size: 26rpx;
  color: #333;
  line-height: 1.7;
  background: #f9fbfd;
  border-radius: 18rpx;
  padding: 22rpx;
  word-break: break-all;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-title {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 34rpx;
  font-weight: 800;
  background: linear-gradient(135deg, #13c2a3 0%, #0fa085 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16rpx;
  letter-spacing: 0.5rpx;
  justify-content: flex-start;
}

.section-detail {
  font-size: 26rpx;
  color: #333;
  line-height: 1.7;
  font-weight: 400;
}

/* 加载遮罩与动画 */
.loading-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.spinner {
  width: 56rpx;
  height: 56rpx;
  border: 6rpx solid #e6ebf2;
  border-top-color: #13c2a3;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 优化后的底部操作栏样式 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  height: 110rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  z-index: 100;
  padding: 0 24rpx;
  align-items: center;
  gap: 20rpx;
  border-top: 1rpx solid rgba(19, 194, 163, 0.1);
}

.edit-btn, .delete-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-size: 28rpx;
  font-weight: 600;
  background: transparent;
  border-radius: 24rpx;
  height: 80rpx;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.edit-btn {
  background: linear-gradient(135deg, #05a273 0%, #04c2a4 100%);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(5, 162, 115, 0.25);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
}

.edit-btn image {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
  flex-shrink: 0;
}

.edit-btn:hover {
  background: linear-gradient(135deg, #048a69 0%, #03b293 100%);
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 20rpx rgba(5, 162, 115, 0.4);
}

.delete-btn {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(108, 117, 125, 0.25);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
}

.delete-btn image {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
  flex-shrink: 0;
}

.delete-btn:hover {
  background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 20rpx rgba(108, 117, 125, 0.4);
}

.edit-btn::after, .delete-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.2s;
}

.edit-btn:active::after, .delete-btn:active::after {
  opacity: 1;
}
</style>

<script>
export default {
  data() {
    return {
      isLoading: true,
      error: null,
      job: {},
      tabActive: 0,
      id: '',
      isFavorite: false,
      scrollTop: 0,
      backIcon: '/static/back.png',
      topBg: '/static/BG.png',
      apiUrl: 'https://api.example.com/job-detail',
      scrollIntoView: '',
      mainContentMarginTop: 0,
      scrollHeight: 0
    }
  },
  onReady() {
    this.updateMainContentMargin();
    // Calculate dynamic height for card-section
    const sysInfo = uni.getSystemInfoSync();
    const safeInsets = sysInfo.safeAreaInsets || { top: 0, bottom: 0 };
    uni.createSelectorQuery().in(this).select('.top-section').boundingClientRect((top) => {
      uni.createSelectorQuery().in(this).select('.action-bar').boundingClientRect((bottom) => {
        // Account for main-content margin-top: -100rpx ≈ -50px overlap (assuming 1rpx = 0.5px)
        const overlap = 50;
        // Add safe area considerations and extra buffer for iPhone 14 Pro Max
        const extraBuffer = 50 + safeInsets.top + safeInsets.bottom;
        this.scrollHeight = sysInfo.windowHeight - top.height + overlap - bottom.height + extraBuffer;
      }).exec();
    }).exec();
  },
  onLoad(options) {
    this.id = options.id || '';
    this.fetchJobDetail();
  },
  methods: {
    updateMainContentMargin() {
      uni.createSelectorQuery().in(this).select('.top-section').boundingClientRect(rect => {
        if (rect) {
          this.mainContentMarginTop = rect.height;
        }
      }).exec();
    },
    goBack() {
      uni.navigateBack();
    },
    async fetchJobDetail() {
      this.isLoading = true;
      this.error = null;
      try {
        // 真实接口请求，返回结构需与mock一致
        const res = await uni.request({
          url: `${this.apiUrl}?id=${this.id}`,
          method: 'GET'
        });
        if (res[1] && res[1].statusCode === 200 && res[1].data) {
          this.job = res[1].data;
        } else {
          throw new Error('加载失败');
        }
      } catch (e) {
        // 请求失败时回退到mock数据
        const mockJob = {
          id: 'job1',
          companyIcon: 'https://img1.baidu.com/it/u=1739539544,3582138974&fm=253&fmt=auto&app=120&f=PNG?w=243&h=243',
          jobTitle: '用户产品经理',
          companyName: '小红书',
          salary: '18-42k*16',
          province: '北京',
          city: '朝阳区',
          tags: ['2025届', '商业化', '社交产品', '高薪岗位'],
          jobDescription: 'We are the teams who create all of Facebook\'s products used by billions of people around the world. Want to build new features and improve existing products like Messenger, Video, Groups, News Feed, Search and more? We are the teams who create all of Facebook\'s products used by billions of people around the world. Want to build new features and improve existing products like Messenger, Video, Groups, News Feed, Search and more?',
          jobRequirement: 'We are the teams who create all of Facebook\'s products used by billions of people around the world. Want to build new features and improve existing products like Messenger, Video, Groups, News Feed, Search and more?We are the teams who create all of Facebook\'s products used by billions of people around the world. Want to build new features and improve existing products like Messenger, Video, Groups, News Feed, Search and more?We are the teams who create all of Facebook\'s products used by billions of people around the world. Want to build new features and improve existing products like Messenger, Video, Groups, News Feed, Search and more?We are the teams who create all of Facebook\'s products used by billions of people around the world. Want to build new features and improve existing products like Messenger, Video, Groups, News Feed, Search and more?',
          companyDetail: 'We are the teams who create all of Facebook\'s products used by billions of people around the world. Want to build new features and improve existing products like Messenger, Video, Groups, News Feed, Search and more?'
        };
        this.job = mockJob;
      } finally {
        this.isLoading = false;
      }
    },
    scrollToSection(id, idx) {
      this.scrollIntoView = id;
      this.tabActive = idx;
    },
    // Revert onContentScroll to original
    onContentScroll(e) {
      this.scrollTop = e.detail.scrollTop;
      
      uni.createSelectorQuery().in(this).selectAll('.card-section .content-card').boundingClientRect(rects => {
        const scrollTop = e.detail.scrollTop;
        let active = 0;
        for (let i = 0; i < rects.length; i++) {
          if (scrollTop + 120 >= rects[i].top) active = i;
        }
        this.tabActive = active;
      }).exec();
    },
    // Remove onPageScroll since outer no longer scrolls
    // onPageScroll(e) { ... } removed
    
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
      const message = this.isFavorite ? '已添加到收藏' : '已取消收藏';
      uni.showToast({
        title: message,
        icon: 'none'
      });
      
      // TODO: 调用收藏接口
      // try {
      //   await uni.request({
      //     url: `/api/jobs/${this.id}/favorite`,
      //     method: this.isFavorite ? 'POST' : 'DELETE'
      //   })
      // } catch (error) {
      //   console.error('收藏操作失败:', error)
      // }
    },
    editJob() {
      // 跳转到发布招聘页面进行编辑
      uni.navigateTo({
        url: `/pages/recruit/publish-job?id=${this.id}`
      });
    },

    deleteJob() {
      // 显示确认删除弹窗
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个岗位吗？删除后不可恢复。',
        confirmText: '删除',
        confirmColor: '#ff4757',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 显示加载状态
              uni.showLoading({
                title: '删除中...'
              });

              // TODO: 调用删除接口
              // const result = await deleteJobApi(this.id);

              // 模拟删除操作
              await new Promise(resolve => setTimeout(resolve, 1000));

              uni.hideLoading();

              uni.showToast({
                title: '删除成功',
                icon: 'success'
              });

              // 删除成功后返回上一页
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);

            } catch (error) {
              uni.hideLoading();
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              });
              console.error('删除失败:', error);
            }
          }
        }
      });
    }
  }
}
</script>